<template>
  <div>
    <el-tabs
      v-model="activeTab"
      type="border-card"
      @tab-click="handleTabClick"
    >
      <el-tab-pane
        label="留存分析"
        name="retention"
      >
        <component
          :is="dynamicComponents.retention"
          v-if="activeTab == 'retention'"
        />
      </el-tab-pane>
      <el-tab-pane
        label="ARPU统计"
        name="up"
      >
        <component
          :is="dynamicComponents.up"
          v-if="activeTab == 'up'"
        />
      </el-tab-pane>
      <el-tab-pane
        label="时长分析"
        name="duration"
      >
        <component
          :is="dynamicComponents.duration"
          v-if="activeTab == 'duration'"
        />
      </el-tab-pane>
      <el-tab-pane
        label="收益统计"
        name="cost"
      >
        <component
          :is="dynamicComponents.cost"
          v-if="activeTab == 'cost'"
        />
      </el-tab-pane>
      <el-tab-pane
        label="ECPM统计"
        name="ecpm"
      >
        <component
          :is="dynamicComponents.ecpm"
          v-if="activeTab == 'ecpm'"
        />
      </el-tab-pane>
      <el-tab-pane
        label="ROI统计"
        name="roi"
      >
        <component
          :is="dynamicComponents.roi"
          v-if="activeTab == 'roi'"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import retention from './retentionData.vue'
import up from './upRetentionData.vue'
import duration from './durationNew.vue'
import cost from './cost.vue'
import ecpm from './ecpm.vue'
import roi from './roi.vue'

// const isPlatform = () => {
//   const platform = localStorage.getItem('platform')
//   console.log(platform)
//   if (platform == 0 || platform == '' || platform == null || platform == undefined) {
//     ElMessage({
//       type: 'error',
//       message: '请先选择渠道'
//     })
//     setTimeout(() => {
//       window.location.href = '/#/layout/dashboard'
//     }, 1000)
//   }
// }

// isPlatform()
const dynamicComponents = {
  retention,
  up,
  duration,
  cost,
  ecpm,
  roi,
}

const activeTab = ref('retention')

const handleTabClick = (tab) => {
  activeTab.value = tab.name
}
</script>
